<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" label-width="100px" :label-position="type =='view'?'right':'top'">
      <el-form-item label="上传文件:">
        <ImageCommon v-if="type !=='view'" :up-type="2" info="选择附件" :limit="20" v-model="form.fileId"></ImageCommon>
        <ImageCommon v-if="type =='view'" :up-type="2" info="选择附件" :limit="20" v-model="form.fileId" disabled></ImageCommon>

      </el-form-item>
      <el-form-item label="备注：">
        <el-input style="width: 60%;" maxlength="500" type="textarea" v-if="type!=='view'" :rows="8" placeholder="请输入内容" v-model="form.remark">
        </el-input>
        <span v-if="type=='view'">{{ form.remark }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "carUpload",
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case 1:
          status = "view";
        case "disabled":
          status = "view";
          break;
        case "readonly":
          status = "view";
          break;
        case "view":
          status = "view";
          break;
        case "edit":
          status = "edit";
          break;
      }
      return status;
    },
  },
  data() {
    return {};
  },
  mounted() {
    console.log(this.state, this.type, "----------");
  },
  methods: {},
};
</script>

  <style lang="scss" scoped>
.app-container {
  background-color: #fff;
}
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
  .content {
    width: 90%;
    margin: 0 auto;
  }
}
</style>
